import React, { Component } from 'react'

export default class App extends Component {

    state = {
        firstName: '张',
        lastName: '一',
        jzl: '思思'
    }

    // changeFirstName(e){
    //     // console.log(e.target.value);
    //     this.setState({
    //         firstName:e.target.value
    //     })
    // }

    // changeLastName(e){
    //     this.setState({
    //         lastName:e.target.value
    //     })
    // }


    /* 
        多个输入框绑定一个方法,该方法设置值的时候用到标签的 name 属性
        所以我们标签中一定要定义一个属性名,而且该名最好还要和我们 value 中属性一样
    */
    changeValue(e) {
        // console.dir(e.target.name);
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    render() {

        return (
            <>
                <h1> {this.state.firstName}{this.state.lastName}说: 今天是周四,周六还会远吗?</h1>
                <h2>{this.state.jzl}说:</h2>
                {/* 该输入框不能输入任何内容 */}
                {/* <input type="text" value={this.state.firstName}/> */}
                {/* 
                    如果你给输入框设置了value属性,就一定要给其添加一个 onChange 事件,否则
                    该输入框为只读,无法输入任何内容
                    如果说你是需要设置一个默认值, 那么你可以通过 defaultValue 进行设置默认值
                */}

                {/* 单纯的默认值当输入框内容发生改变时,不会影响到 firstName */}
                {/* <input type="text" defaultValue={this.state.firstName}/> */}


                {/* 该写法叫受控表单,只要有 value 代表是受控的,没有value就是非受控 */}


                {/* name 属性是用来做表单提交时的标识符 */}
                <input type="text" name='firstName' value={this.state.firstName} onChange={(e) => { this.changeValue(e) }} />

                <input type="text" name='lastName' value={this.state.lastName} onChange={(e) => { this.changeValue(e) }} />

                <input type="text" name='jzl' value={this.state.jzl} onChange={(e) => { this.changeValue(e) }} />
            </>
        )
    }
}
